<template>
  <div  style="padding-bottom:2rem;padding-top:1.5rem;">
    <TopNav title="VipZoomPage.hyzq" show_left="true"></TopNav>
    <div class="main-box">
      <ul class="login_nav">
        <li><a :href="'http://gm1.wdaxia.com?token='+this.token">
          <img src="../../static/icons/game/fruit.png" alt="">
          <p>{{ $t('VipZoomPage.sgjc') }}</p></a></li>
      </ul>
    </div>
    <MainNav nav_index="4"/>
  </div>
</template>

<script>
import Vue from 'vue';
import MainNav from "../components/MainNav";
import Notice from "../components/Notice";
import EmptyBox from "../components/EmptyBox";
import { Step, Steps } from 'vant';
import helper from "../utils/helper";

import 'vant/lib/step/style';
import 'vant/lib/steps/style';
import TopNav from "../components/TopNav";

Vue.use(Step);
Vue.use(Steps);

export default {
  name: 'VipZoomPage',
    components: {TopNav, EmptyBox, MainNav,Notice},
    data () {
    return {
      user:{},
        token:''
    }
  },
    methods:{
        getData(){
            let loading = this.$toast.loading();
            this.$axios.get(this.$api_url.user).then((res)=>{
                this.user = res.data;
            }).catch((err)=>{
                this.$toast.fail(err.message)
            }).then(()=>{
                loading.hide();
            })
        },
    },
    mounted() {
      this.token = helper.getToken();
      this.getData();
    },
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  a{
    color:#111;
  }
  .main-box{
    text-align: left;
  }
  .header{
    color: #464646!important;
    font-size: .373333rem;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    height: 3.146667rem;
    padding: 0 .32rem;
    width: 100%;
    height: 6.386667rem;
    background: url(/static/img/profile-bg.png);
    background-size: 100% 100%;
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding: 0!important;
  }
  .header .img{
    margin-top: .96rem;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 0 .533333rem;
  }
  .header .img img{
    width: .586667rem;
    height: .586667rem;
    display: block;
    vertical-align: middle;
  }
  .header .info{
    margin-top: .626667rem;
    padding-left: .533333rem;
    overflow: hidden;
  }
  .header .info .headerImg{
    width: 1.333333rem;
    height: 1.333333rem;
    display: block;
    border-radius: 50%;
    float: left;
    border: .013333rem solid #fff;
    box-sizing: border-box;
  }
  .header .info .name{
    margin-left: .32rem;
    float: left;
  }
  .header .info .name strong{
    font-size: .48rem;
    color: #171717;
    display: block;
    float: left;
  }
  .header .info .name em
  {
    display: block;
    float: left;
    margin-left: .16rem;
    height: .426667rem;
    background: rgba(0,0,0,.2);
    color: #fff;
    border-radius: .053333rem;
    font-size: .266667rem;
    line-height: .426667rem;
    text-align: center;
    margin-top: .106667rem;
    padding-left:0.1rem;
    padding-right:0.1rem;
  }
  .header .info .name small{
    clear: both;
    font-size: .346667rem;
    color: #434343;
    margin-top: .8rem;
    display: block;
    text-align: left;
  }
  .header .balance{
    width: 8.88rem;
    height: 2.146667rem;
    background: url(/static/img/card-bg.png) no-repeat;
    background-size: 100% 100%;
    margin: .533333rem auto auto;
    padding: 0 .426667rem;
    position: relative;
  }
  .header .balance p{
    float: left;
    font-size: .373333rem;
    color: #f2d8be;
    text-align: left;
  }
  .header .balance p span{
    color: hsla(0,0%,100%,.6);
    margin-top: .32rem;
    display: block;
  }
  .header .balance p em{
    display: block;
    margin-top: .2rem;
    color: #f2d8be;
    font-style: normal;
    font-size: .346667rem;
  }
  .header .balance p em small{
    font-size: .586667rem;
    font-weight: 700;
  }
  button{
    width: 100%;
    font-size: .4rem;
    line-height: .986667rem;
    color: #fff;
    text-align: center;
    border-radius: .08rem;
    background-color: #2f3848;
    margin-top: .48rem;
  }

  .header .balance button{
    display: block;
    float: right;
    margin-left: .426667rem;
    width: 1.546667rem;
    height: .746667rem;
    border: none;
    background: hsla(0,0%,100%,.2);
    border-radius: .373333rem;
    margin-top: .733333rem;
    font-size: .373333rem;
    text-align: center;
    line-height: .746667rem;
    color: #fff;
  }
  .header .balance button a{
    color:#fff;
  }

  .yh{
    width: 100%;
    height: .92rem;
    background-image: url(/static/img/card-bottom.png);
    background-size: 100%;
    position: absolute;
    bottom: 0;
  }

  .login_nav{
    border-top: .013333rem solid #ccc;
    background: #fff;
    overflow: hidden;
  }

  .login_nav li{
    float: left;
    width: 33.33%;
    box-sizing: border-box;
    border-right: .013333rem solid #ccc;
    border-bottom: .013333rem solid #ccc;
    text-align: center;
    padding: .56rem 0 .066667rem;
  }

  .login_nav li img{
    height: 1.04rem;
  }
  .login_nav li p{
    font-size: .373333rem;
    line-height: 1.2rem;
    color: #333;
  }
  .LoginOut{
    margin-top:0.5rem;
    padding: 0 .333333rem .666667rem;
  }

  .headphoto-box{
    padding:0.6rem;
    text-align: center;
  }
  .headphoto-box::-webkit-scrollbar {
    display:none
  }
  .headphoto-box img{
    height: 2rem;
    width: 2rem;
    border-radius: 50%;
    border: thin solid #ccc;
  }
  .bell-tips{
    -webkit-animation: icon-bounce 4s infinite;
    -moz-animation: icon-bounce 0.5s infinite;
    -o-animation: icon-bounce 0.5s infinite;
    animation: icon-bounce 0.5s infinite;
  }
  .unread-list{
    text-align: left;
  }
  .unread-list li{
    padding: 0.2rem 0;
    border-bottom: thin dashed #ccc;
    font-size:0.4rem;
  }
  .credit-tips{
    text-align: center;
    position: relative;
    top:5px;
    font-weight: bold;
  }
</style>
